<template>
	<view class="container" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">
		
		<navBar title="文章详情" />
		
		<view class="info-content">
			<view class="ic-title">{{ info.articleTitle	 }}</view>
			
			<view class="ic-header">
				<view class="ich-left">
					<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png" mode=""></image>
					<text>{{ info.author ? '@' + info.author : ''}}</text>
				</view>
				<view class="ich-right">
					{{ info.publishTime ? info.publishTime.split(' ')[0] : ''	 }}
				</view>
			</view>
			
			<view class="ic-briefIntroduction" v-if="info.briefIntroduction">
				{{ info.briefIntroduction || ''}}
			</view>
			
			<u-parse
				v-if="info.articleContent && info.articleContent.length"
				class="ic-desc"
				:content="info.articleContent"
			></u-parse>
			
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import { mapGetters } from 'vuex'
	
	export default {
		components: {
			navBar
		},
		data() {
			return {
				info: {}
			};
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
		},
		onLoad(query){
			const { id } = query
			this.getAidData(id)
		},
		methods: {
			async getAidData(id){
				const res = await this.$request({
					method: 'GET',
				  url: '/marketing-center/article/detail',
					data: {
						id
					}
				})
				this.info = res.datas
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	.info-content {
		box-sizing: border-box;
		padding: 40rpx;
		.ic-title {
			font-size: 20px;
			color: #333333;
			text-shadow: 0 0 0.1px currentColor;
		}
		
		.ic-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			margin: 28rpx 0;
			color: #999999;
			.ich-left {
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
			}
		}
		
		.ic-briefIntroduction {
			margin-bottom: 24rpx;
			font-size: 14px;
			line-height: 23px;
			color: #666666;
			// color: #333333;
		}
		
		.ic-desc {
			overflow: hidden;
			font-size: 14px;
			/deep/ image {
				width: 100%;
				margin-top: 10px;
			}
		}
	}
}
</style>
